<template>
	<view class="page flex-col">
		<scroll-view @scrolltolower="lowerBottom" :scroll-y="modalName==null" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-red" :isBack="true">
				<block slot="content">搜索</block>
			</cu-custom>
			<view class="insearch">
				<uni-search-bar clearButton="none" cancelButton="none" placeholder="搜索你感兴趣的..." @confirm="search"
					v-model="dangerDesc">
				</uni-search-bar>
				<view class="saitime" @click="timeClick">日期筛选<text class="image iconfont">&#xe74a;</text></view>
			</view>
			
			<empty v-if="auctionpageData.length == 0"></empty>
			<view class="section1 flex-col" v-else>
				<view class="Body flex-col">
					<view class="bd2 flex-col justify-between">
						<view class="box3 flex-col">
							<view class="group1 flex-col" @click="godetail(item.auctionId,item.startTime)"
								v-for="(item, index1) in auctionpageData" :key="index1">
								<view class="outer1 flex-row justify-between">
									<view class="box4 flex-col">
										<image class="box5 flex-col" :src="$getFileAccessHttpUrl(item.icon)" mode="aspectFill"></image>
									</view>
									<view class="box6 flex-col  justify-between">
										<view class="TextGroup1 flex-col">
											<view class="txt2">{{item.title}}</view>
											<view class="wordbox">
												<view class="word3 labelbordr">{{item.category}}</view>
											</view>
											<view class="wordbox">
												<view class="word3">拍品数量：{{item.itemNum == null ? '0' : item.itemNum}},
												</view>
												<view class="word2">下单数量：{{item.orderNum == null ? '0' : item.orderNum}}
												</view>
											</view>
											<view class="wordbox" v-if="item.status == 2">
												<view class="word3">报名截止时间：{{item.applyTime}}</view>
											</view>
											<view class="timeout">
												<view class="outer2 flex-col">
													<view class="word5" v-if="item.status == 2">
														未开始
													</view>
													<view class="word5" v-if="item.status == 4">
														进行中
													</view>
													<view class="word5" v-if="item.status == 5">
														暂停中
													</view>
													<view class="word5" v-if="item.status == 6">
														已结束
													</view>
												</view>
												<!-- <view class="word4">{{liveCountdown}}</view> -->
												<view class="word4" v-if="item.status == 2 && item.showtime != ''">
													{{item.showtime == '00天00时00分00秒' ? '' : item.showtime}}</view>

											</view>

										</view>
									</view>
								</view>
								<view class="wordbox positop"
									:style="item.auctionWay == 2 ? 'background: url(../../static/home/128/Bgblue.png) -4px 0px no-repeat;background-size: 57px 19px;':'background: url(../../static/home/128/Bgorange.png) -4px 0px no-repeat;background-size: 57px 19px;'">
									<view class="word3">{{item.auctionWayText}}</view>
								</view>

							</view>
							<view class="loadingType">{{loadingType == true ?'没有更多数据了!' : '上拉显示更多'}}</view>
						</view>
					</view>
				</view>
				<empty v-if="auctionpageData.length == 0"></empty>
			</view>

		</scroll-view>

		<!-- 日期筛选 -->
		<uni-popup ref="Biddingpopup" type="bottom" :mask-click="true">
			<view class="scortop">
				<view class="title">日期筛选</view>
				<uni-icons type="close" size="30" @click="compcloseBidding"></uni-icons>
			</view>
			<view class="scrollbox">
				<view class="titlecontent">
					<view class="example">
						<!-- 自定义表单校验 -->
						<uni-forms ref="customForm" :rules="rules" :modelValue="params">
							<uni-forms-item label="时间" name="date">
								<uni-data-checkbox v-model="params.date" :localdata="date" />
							</uni-forms-item>
						</uni-forms>
					</view>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<button type="warn" class="cu-btn bg-blue lg shadow" @click="understand">筛选</button>
			</view>
		</uni-popup>

	</view>

</template>

<script>
	import server from '@/api/server.js'
	export default {
		props: {},
		data() {
			return {
				date: [{
					text: '最近一周',
					value: 'week'
				}, {
					text: '最近一个月',
					value: 'month'
				}, {
					text: '最近一年',
					value: 'year'
				}, {
					text: '全部',
					value: ''
				}],
				formDataSignup: {
					date: 0,
				},
				rules: {

				},
				loadingType: false,
				modalName: null,
				hr: 0,
				min: 0,
				sec: 0,
				timeend: '',
				tabIndex: 0, // 选中的
				dangerDesc: '', // 搜索内容
				auctionpageData: [],
				params: {
					date: '',
					category: '',
					status: '',
					title: '',
					pageNo: 1,
					pageSize: 10,
				},
			};
		},
		//在.js文件中监听下拉触底
		onReachBottom: function() {
			console.log('1324543456')
			if (!this.loadingType) {
				this.apiauctionpage()
			}
		},
		onLoad: function() {

		},
		mounted() {
			if (this.$root.$mp.query.status != undefined) {
				this.params.status = this.$root.$mp.query.status
			}
			if (this.$root.$mp.query.id != undefined) {
				this.params.category = this.$root.$mp.query.id
			}
			this.apiauctionpage()
		},
		computed: {

		},
		methods: {
			//日期筛选
			timeClick() {
				this.$refs.Biddingpopup.open('top')
			},

			understand() {
				this.$refs.Biddingpopup.close()
				this.params.pageNo = 1
				this.auctionpageData = []
				this.apiauctionpage()
			},
			godetail(auctionId, time) {
				uni.navigateTo({
					url: '/page_myauction/myauction/myauctionDetail?auctionId=' + auctionId
				})
			},
			search() {
				this.params.pageNo = 1
				this.auctionpageData = []
				this.params.title = this.dangerDesc
				this.apiauctionpage()
			},
			getLiveTimeCount(data) {
				let that = this
				//注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
				var data = data
				data.forEach((item) => {
					var replaceTime = item.startTime
					let transedPreTime = replaceTime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
					let nowTime = new Date().getTime(); //获取当前时间毫秒数
					let preTime = new Date(transedPreTime).getTime() //处理好格式之后获取结束时间的毫秒数
					let obj = null;
					if (preTime - nowTime > 0) {
						let time = (preTime - nowTime) / 1000;
						let day = parseInt(time / (60 * 60 * 24));
						let hou = parseInt(time % (60 * 60 * 24) / 3600);
						let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
						let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
						obj = {
							day: day < 10 ? '0' + day : day,
							hou: hou < 10 ? '0' + hou : hou,
							min: min < 10 ? '0' + min : min,
							sec: sec < 10 ? '0' + sec : sec
						};
						item.showtime = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
						// console.log(item.showtime,'12345678')
					} else {
						// obj = {
						// 	day: '00',
						// 	hou: '00',
						// 	min: '00',
						// 	sec: '00'
						// };
						item.showtime = ''
						// console.log('item.showtime',item.showtime)
					}
				})
				this.auctionpageData = data
				this.$forceUpdate();
			},
			//列表
			apiauctionpage() {
				var that = this
				server.auctionpage(this.params).then(res => {
					console.log(res)


					if (res.data.success) {
						if (res.data.result.records.length != 10) { //没有数据
							this.loadingType = true;
						}
						this.params.pageNo++; //每触底一次 page +1
						this.auctionpageData = this.auctionpageData.concat(res.data.result.records); //将数据拼接在一起 
						this.gonexttick()
						// var timer = setInterval(function() {
						// 	that.getLiveTimeCount(that.auctionpageData)
						// }, 1000)
						// this.timer = timer
					} else {
						this.$tip.error(res.data.message)
					}

				})
			},
			gonexttick(){
				let that = this
				that.$nextTick(function(){
					// console.log('1234543454345t')
					that.liveCountTimes = setInterval(function(){
						that.getLiveTimeCount(that.auctionpageData)
					},1000)
				})
			},
		},

		beforeDestroy() {

		},
	}
</script>

<style scoped lang="scss">
	.insearch {
		display: flex;
		justify-content: space-between;
		align-items: center;

		/deep/.uni-searchbar,uni-search-bar {
			flex: 1;
		}

		.saitime {
			display: flex;
			align-items: center;
			padding-right: 10px;
		}
	}
</style>
